<template>
  <div>
    <table-form :disabled="disabled" @next="sales2Ctrl" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">
          <div>等待业主支付费用</div>
          <i
            v-if="isEdit && detailRes.step <= 9"
            class="edit-icon"
            @click="isEnabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="sales2Form"
          :model="sales2Form"
          label-width="95px"
          class="formDiv"
        >
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="支付结果:" :required="true">
                <el-col>
                  <span class="next_pt">
                    {{ sales2Form.payStatus !== 1 ? "待支付" : "已支付"
                    }}{{
                      payType
                        ? `(${payType}/${formatDot(detailRes.payDate)})`
                        : ""
                    }}
                  </span>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <p class="next_p">
                <!-- <span
                  :class="
                    sales2Form.deductFlag === 0 || sales2Form.payStatus === 1
                      ? 'gray'
                      : ''
                  "
                  @click="rentDeduction"
                >
                  业主已租金抵扣</span
                > -->
                <span
                  :class="[
                    sales2Form.payStatus === 1 ? 'gray' : '',
                    'next_span',
                  ]"
                  @click="offlinePayment"
                  >业主已线下支付</span
                >
              </p>
            </el-col>
          </el-row>
          <el-form-item label="备注:">
            <el-input
              v-model="sales2Form.remarkStep2"
              :disabled="isEdit && !isEnabled"
              type="textarea"
              placeholder="请输入"
              style="width: 493px"
              :rows="5"
            />
          </el-form-item>
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isEnabled"
            :disabled="disabled"
            type="primary"
            @click="saveEdit"
            >保存</el-button
          >
        </div>
      </template>
    </table-form>
  </div>
</template>
<script>
import TableForm from "../../../lease/components/tableForm";
import { saleStep2, saleDetail, edit, deduct, offlinePay } from "@/api/sale";
import { formatDot } from "@/utils/common";
export default {
  components: {
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formatDot,
      sales2Form: {
        remarkStep2: "",
        deductFlag: "",
        id: "",
        payStatus: 0,
      },
      textarea: "",
      disabled: false,
      isEnabled: false,
      detailRes: {
        jumpList: [],
      },
      payType: "",
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";

      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 2;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    sales2Form: {
      handler(newVal, oldVal) {
        if (newVal.payStatus === 0) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      },
      deep: true,
    },
  },
  created() {
    this.getsaleDetail();
  },
  methods: {
    async saveEdit() {
      var res = await edit(this.sales2Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = false;
      }
    },
    async getsaleDetail() {
      var saleRes = await saleDetail(this.id);
      this.detailRes = saleRes.data;
      this.sales2Form = {
        remarkStep2: saleRes.data.remarkStep2,
        deductFlag: saleRes.data.deductFlag,
        id: this.id,
        payStatus: saleRes.data.payStatus,
        stepName: "待支付费用",
      };
      this.payType = ["微信", "租金抵扣", "线下支付"][saleRes.data.payType];
    },
    async sales2Ctrl() {
      this.sales2Form.id = this.id;
      var sale2Res = await saleStep2(this.sales2Form);
      if (sale2Res.code === 200) {
        this.$emit("next");
      }
    },
    async rentDeduction() {
      var res = await deduct(this.id);
      if (res.code === 200) {
        this.getsaleDetail();
      }
    },
    async offlinePayment() {
      var res = await offlinePay(this.id);
      if (res.code === 200) {
        this.getsaleDetail();
      }
    },
    jump() {
      this.$emit("jump", this.sales2Form);
    },
  },
};
</script>
<style lang="scss" scoped>
element.style {
  height: 133px !important;
}
.next_p {
  display: block;
  color: #5ac6b7;
  font-size: 12px;
}
.next_p span {
  left: 100px;
  cursor: pointer;
}
.next_pt {
  font-size: 12px;
  margin-left: -10px;
}
.next_span {
  padding: 20px;
}
.gray {
  color: gray !important;
  cursor: not-allowed !important;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
